<template>
  <div>
    <h1>总价：{{ totalPrice }}</h1>
    <template v-for="item in cartlist">
      <card-item :key="item.id" :item="item">
        <template #footer>
          <van-button size="small" @click="handleAddItem(item)">+</van-button>
          <van-button size="small" @click="handleReduceItem(item)">
            -
          </van-button>
        </template>
      </card-item>
    </template>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
import CardItem from '../components/CardItem.vue'
export default {
  components: { CardItem },
  computed: {
    ...mapState({
      list: (state) => state.cart.list,
      cartlist: (state) => state.cart.cartList,
    }),
    ...mapGetters(['totalPrice']),
  },
  methods: {
    ...mapMutations(['add_item', 'reduce_item']),
    // ++
    handleAddItem(item) {
      this.add_item(item)
    },
    // --
    handleReduceItem(item) {
      this.reduce_item(item)
    },
  },
}
</script>

<style lang="scss" scoped>
.cart-item {
  height: 2rem;
  background: lightblue;
  transition: transform 0.5s;
}
</style>
